<!--
 * @Author: coocase
 * @Date: 2021-03-25 09:57:37
 * @LastEditTime: 2021-06-22 01:55:08
 * @LastEditors: coocase
 * @Description: 
 * @FilePath: \git\dami\src\components\footer.vue
-->
<template>
  <div class="footer">
       <Layout class="footer-layout">
        <Header class="links">
            <div class="links-group">
                <p class="link-title">订购方式</p>
                <div class="link-info">
                    <p class="link-item">在线订购</p>
                    <p class="link-item">电话订购</p>
                    <p class="link-item">上门订购</p>
                    <p class="link-item">团体订购</p>
                    <p class="link-item">超级票订购</p>
                </div>
            </div>
            <div class="links-group">
                <p class="link-title">配送方式</p>
                <div class="link-info">
                    <p class="link-item">送货上门</p>
                    <p class="link-item">电子票</p>
                    <p class="link-item">上门取件</p>
                    <p class="link-item">自助机换票</p>
                </div>
            </div>
            <div class="links-group">
                <p class="link-title">支付方式</p>
                <div class="link-info">
                    <p class="link-item">在线支付</p>
                    <p class="link-item">柜台取货</p>
                </div>
            </div>
            <div class="links-group">
                <p class="link-title qrcode">微信</p>
                <img src="../assets/test.png" alt="QR code" class="qrcode-weixin">
            </div>
            <div class="links-group">
                <p class="link-title qrcode" >触屏版</p>
                <div class="link-info">
                    <img src="../assets/test.png" alt="QR code" class="qrcode-weixin">
                </div>
            </div>
            <div class="links-group">
                <p class="link-title">账户安全</p>
                <div class="link-info">
                    <p class="link-item">找回密码</p>
                    <p class="link-item">账号注册</p>
                    <p class="link-item">账号绑定</p>
                    <p class="link-item">ssl安全证书</p>
                </div>
            </div>
            <div class="links-group">
                <p class="link-title">配送方式</p>
                <div class="link-info">
                    <p class="link-item">退换及缺货说明</p>
                    <p class="link-item">发票帮助</p>
                    <p class="link-item">订票服务条款</p>
                </div>
            </div>
            <div class="links-group">
                <p class="link-title">特色服务</p>
                <div class="link-info">
                    <p class="link-item">演出订阅</p>
                </div>
            </div>
        </Header>
        <Content class="company">
            <span class="company-info">公司介绍</span>
            <span class="company-info">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品牌认识</span>
            <span class="company-info">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;企业荣誉</span>
            <span class="company-info">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隐私声明</span>
            <span class="company-info">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系合作</span>
            <span class="company-info">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;招聘信息</span>
            <span class="company-info">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网站地图</span>
            <span class="company-info">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;友情链接</span>
            <span class="company-info">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司大记事</span>
        </Content>
        <Footer class="footer-other">
            <div class="img"></div>
        </Footer>
    </Layout>
  </div>
</template>

<script>
export default {
    name:'Foot'
}
</script>

<style scoped>
.links{
    display: flex;
    justify-content: space-between;
    align-items: start;
    background-color: #f5f7f9;
    height: 100%;
    margin-top: 50px;
    border-bottom: 2px solid red;
    padding-bottom: 30px;
}
.link-title{
    font-size: 18px;
}

.link-item{
    margin: 5px 5px 5px 0px;
    font-size: 12px;
    line-height: 20px;
}
.qrcode-weixin{
    width: 100px;
    height: 100px;
}

.company{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:20px 200px;
}
.company-info{
    font-size: 18px;
    color: rgb(139, 138, 138);
}
.footer-other{
    align-self: center;
}
</style>